<!--
 * @Date: 2020-09-16 15:36:45
 * @LastEditors: 小枫
 * @LastEditTime: 2020-09-20 09:25:09
 * @FilePath: \feng-blog\src\components\ReviewList.vue
-->
<template lang="pug">
.review-list 评论({{reviewList.length}})
  .review-input
    el-input.input(
      type="textarea",
      :rows="2",
      :placeholder="input_pla",
      v-model="review",
    )
    el-button.btn(
      type="primary",
      @click="publicReview",
      :disabled="canReview"
    ) 发表<br>评论
    el-button(
      v-if="to_uid",
      @click="clearToUid"
    ) 取消<br>回复
  .review(v-for="(item, index) in reviewList", :key="item.rid")
    .info-content
      el-avatar {{ item.from_username | getFirstChar }}
      .content
        span.name {{ item.from_username }}
        span(v-if="item.to_uid !== 0") 回复
          span.name {{ item.to_username }}
        span : {{ item.content }}
        .time {{ item.createAt | formatDate }}
        el-button(
          type="text",
          @click.native="changeToUid(item)"
        ) 回复
</template>

<script>
export default {
  inject: ['reload'],
  props: {
    reviewList: Array,
    topic_id: Number,
  },
  data() {
    return {
      canReview: true,
      review: "",
      to_uid: null,
      input_pla: '分享一下你的见解'
    };
  },
  watch: {
    review(val) {
      if(val.length > 0) {
        this.canReview = false
        if(val.replace(/(^\s*)|(\s*$)/g, "").split('').length === 0) {
          this.canReview = true
        }
      } else {
        this.canReview = true
      }
    }
  },
  methods: {
    publicReview() {
      const reviewObj = {
        content: this.review,
        topic_id: this.topic_id,
        createAt: new Date().getTime(),
        to_uid: this.to_uid,
      };
      this.$http.post("/reviews", reviewObj).then((res) => {
        if (res) {
          this.$message({
            type: "success",
            message: "发布评论成功",
          });
          this.reload();
        }
      });
    },
    changeToUid(item) {
      this.to_uid = item.from_uid
      this.input_pla = `回复@${item.from_username}:`
    },
    clearToUid() {
      this.to_uid = null
      this.input_pla = '分享一下你的见解'
    }
  },
  filters: {
    // 取首字母
    getFirstChar: function (value) {
      value = value.toString();
      return value.charAt(0).toUpperCase();
    },
  },
};
</script>

<style lang="less" scoped>
.review-list {
  text-align: left;
  height: 100%;
  .review-input {
    padding: 0 20px;
    margin-top: 20px;
    .input {
      width: 50%;
    }
    .btn {
      margin-left: 10px;
    }
  }
  .review {
    height: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 20px;
    .info-content {
      display: flex;
      .content {
        margin-left: 10px;
        justify-content: center;
      }
      .time {
        color: #777;
        font-size: 12px;
      }
      .name {
        color: #828382;
      }
    }
  }
  @media screen and (max-width: 780px) {
    margin-left: 10px;
    .review-input {
      display: flex;
      .input {
        flex: 1;
      }
    }
  }
}
</style>